<template>
  <div class="project-todo-page">
    <div class="page-container">
      <div class="table-header" header="待办事项"></div>
      <div class="table-list" v-loading="loading">
        <vxe-table
          ref="xTable"
          height="99%"
          class="scrollbarStyle"
          align="center"
          show-overflow
          show-header-overflow
          :data="tableData"
          :column-config="{ resizable: true }"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column
            show-overflow
            :key="index"
            :title="item.title"
            :field="item.key"
            :min-width="item.width"
            v-for="(item, index) in columns"
          >
            <template #default="{ row }">
              <div>{{ row[item.key] }}</div>
            </template>
          </vxe-column>
          <vxe-column
            field="operate"
            width="180"
            title="操作"
            fixed="right"
            align="center"
          >
            <template #default="{ row }">
              <div class="text-button-group">
                <a-button type="link" v-if="row.clflag" @click="gotoView(row)">
                  处理
                </a-button>
                <a-button
                  type="link"
                  v-if="row.qrflag"
                  @click="confirmOrder(row)"
                >
                  确认
                </a-button>
                <a-button
                  type="link"
                  v-if="row.lcxxflag"
                  @click="gotoProcessMonitoring(row)"
                >
                  流程监控
                </a-button>
                <a-button
                  type="link"
                  v-if="row.jqButton"
                  @click="gotoBridge(row)"
                >
                  出梁
                </a-button>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div>
        <vxe-pager
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump']"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              第<span>1</span>到<span
                >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
              >共<span>{{ pager.total }}</span
              >条记录
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
    <!-- 处理页面 -->
    <handlePage :visible.sync="pageVisible" :rows="row"></handlePage>
    <!-- 流程监控 -->
    <processPage :visible.sync="processVisible" :rows="row"></processPage>
    <!-- 出梁 -->
    <bridgeModal :visible.sync="bridgeVisible" :dataSource="row"></bridgeModal>
  </div>
</template>

<script>
import handlePage from "./components/handle.vue";
import processPage from "./components/processMonitoring.vue";
import bridgeModal from "./components/bridgeModal.vue";
import { geLSCRWDList, configPushMessage } from "@/api/todo";
export default {
  components: {
    handlePage,
    processPage,
    bridgeModal,
  },
  props: ["isMenuCode"],
  inject: ["upLeave"],
  watch: {
    isMenuCode: {
      handler(val) {
        if (val == "LSCRWD") {
          this.getData();
        }
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      //处理
      pageVisible: false,
      //流程监控
      processVisible: false,
      //出梁
      bridgeVisible: false,
      row: {},
      loading: false,
      columns: [
        {
          title: "桥梁名称",
          key: "bridgeName",
        },
        {
          title: "幅别",
          key: "amClass",
        },
        {
          title: "跨",
          key: "span",
        },
        {
          title: "梁号",
          key: "componentParts",
        },
        {
          title: "推送消息",
          key: "pushComment",
          width: 600,
        },
        {
          title: "推送时间",
          key: "createTime",
        },
      ],
      tableData: [],
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  methods: {
    //出梁
    gotoBridge(row) {
      this.row = row;
      this.bridgeVisible = true;
    },
    //流程监控
    gotoProcessMonitoring(row) {
      this.row = row;
      this.processVisible = true;
    },

    //处理
    gotoView(row) {
      let { remark, componentParts } = row;
      if (remark == "ToGangJinJiaGongPage") {
        this.$router.push({
          path: "/nebula/wisdom-beam-app/rebarProcess",
          query: {
            componentParts,
            type: "fullScreen",
          },
        });
      } else {
        this.row = row;
        this.pageVisible = true;
      }
    },

    //确认
    confirmOrder(row) {
      let that = this;
      let { pushId } = row;
      const h = this.$createElement;
      this.$confirm({
        title: "请再次确认待处理数据?",
        content: "",
        okText: "确定",
        okType: "primary",
        cancelText: "取消",
        centered: true,
        icon: () =>
          h("a-icon", {
            props: {
              type: "question-circle",
              theme: "filled",
            },
            style: "color:#FB5A5A",
          }),
        onOk() {
          that.loading = true;
          configPushMessage({ id: pushId })
            .then((res) => {
              that.$message.success("操作成功");
              that.Index.getTodoData();
              that.getTableData();
            })
            .catch((_) => {})
            .finally((_) => {
              that.loading = false;
            });
        },
        onCancel() {},
      });
    },

    getData() {
      this.upLeave.getTodoData();
      this.pager.page = 1;
      this.getTableData();
    },

    //查询列表
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      return new Promise((resolve, reject) => {
        geLSCRWDList({
          page,
          pageSize,
        })
          .then((res) => {
            let { data } = res;
            this.tableData = data.result?.rows || [];
            this.pager.total = data?.result?.total || 0;
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
  },
};
</script>

<style lang="less" scoped>
.project-todo-page {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .page-container {
    margin-top: 10px;
    flex: 1;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    .table-header {
      padding: 20px 20px;
      box-sizing: border-box;
      .flex();
      justify-content: space-between;
      align-items: center;
      &::before {
        content: attr(header);
        height: 18px;
        border-left: 3px solid var(--primary-color);
        padding-left: 10px;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #525a5d;
        line-height: 18px;
      }
    }
    .table-list {
      flex: 1;
      height: 100%;
    }
  }
}
</style>
